<template>
  <div>
    <el-table style="width: 100%" :data="data">
      <el-table-column label="序号" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="送养人" align="center" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.deliverName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="宠物名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.petName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.petAge }}</span>
        </template>
      </el-table-column>
      <el-table-column label="品种" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.petbreedName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="种类" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.petTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="宠物描述" align="center" width="260">
        <template slot-scope="scope">
          <span>{{ scope.row.petDescr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.examinedeliverTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
          <el-tag effect="dark" v-if="scope.row.examinedeliverStatus == 0">待审核 </el-tag>
          <el-tag type="success" effect="dark" v-if="scope.row.examinedeliverStatus == 1">已通过 </el-tag>
          <el-tag type="danger" effect="dark" v-if="scope.row.examinedeliverStatus == 2">未通过 </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.examinedeliverStatus == 0">
            <el-button size="mini" plain type="success"
              @click="changeStatus(scope.row.examinedeliverId, scope.row.petId, 1)" icon="el-icon-check">同意</el-button>
            <el-button size="mini" plain type="danger" @click="changeStatus(scope.row.examinedeliverId,scope.row.petId, 2)"
              icon="el-icon-close">拒绝</el-button>
          </span>
          <span v-if="scope.row.examinedeliverStatus == 1 || scope.row.examinedeliverStatus == 2">
            <el-button type="success" icon="el-icon-check" circle></el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

export default {

  props: ['data'],
  methods: {
    changeStatus(id, petId, status) {
      this.$emit("clickHandler", id, petId, status)
    }
  },
}
</script>

<style></style>